<template>
  <div>
    <!--    <h1>IScroller示例</h1>-->
    <div id="iscroller-box-content" :style="{height:height+'px'}">
      <div id="demo-content-list" ref="demo-content-list">
        <slot name="list-item" v-for="(item,index) in dataList" :index="index" :data="item"></slot>
        <div v-if="dataList.length===0" class="no-data">暂无数据....</div>
        <div class="c"></div>
      </div>
      <div id="pullDown" v-if="topLoading" class="loading">
        <span class="pullDownIcon"></span>
        <span class="pullDownLabel">下拉刷新...</span>
      </div>
      <div id="pullUp" v-if="bottomLoading" class="loading" :style="{
        bottom:(pullUpBottom?pullUpBottom+'px':'')
      }">
        <span class="pullUpIcon"></span>
        <span class="pullUpLabel">上拉加载更多...</span>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'IScrollerBox',
  props: {
    height: Number,
    url: String,
  },
  data: function () {
    return {
      pullUpBottom:'',
      currIScroll: null,
      reflushOffset: 20,
      reflushOffsetMax: 50,
      topLoading: false,
      bottomLoading: false,
      searchForm: {},
      page: 1,
      pageSize: 10,
      dataList: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    setBottom:function (n) {
      this.pullUpBottom=n
      this.$forceUpdate()
    },
    // 初始化-iscroll
    init: function () {
      let $this = this
      $this.currIScroll = new iScroll('iscroller-box-content', {
        scrollbarClass: 'myScrollbar', /* 重要样式 */
        useTransition: false, /* 此属性不知用意，本人从true改为false */
        topOffset: 0,
        onScrollLimit: function (e) {
          // 下拉
          if (this.y>0) {
            // 小于-最小高度
            if (this.y<$this.reflushOffset){
              setTimeout(function () {
                $this.topLoading = false
              },500)
              $this.$forceUpdate()
            }else{
              // 大于-最大刷新高度
              if (this.y > $this.reflushOffsetMax && !$this.topLoading){
                $this.topLoading = true
                $this.reflushList()
                $this.$forceUpdate()
              }
            }
          }

          // console.info('x: ' + this.x + ',y: ' + this.y)
          // console.log('demo-content-list#offsetHeight',$this.$refs['demo-content-list'].offsetHeight)
          // 上拉
          var diffHeight=(this.maxScrollY - $this.reflushOffsetMax)
          if (this.y < diffHeight) {
            if ($this.bottomLoading) {
              return
            }
            if ($this.dataList.length<$this.pageSize){
              console.log('没有数据了')
              return;
            }
            $this.bottomLoading = true
            $this.loadMore()
            setTimeout(function () {
              $this.bottomLoading = false
            }, 1500)
            // console.info('底部')
          }
        },
        onScrollElseLimit: function (e) {
          // console.info('x: ' + this.x + ',y: ' + this.y)

        },
      })
    },
    // 获取列表
    getList: function (params) {
      let $this = this
      var url = $this.url
      // 如果外部调用,带有搜索form参数
      if (params && params.form) {
        if (JSON.stringify($this.searchForm) !== JSON.stringify(params.form)) {
          $this.page = 1
        }
        $this.searchForm = params.form
      }
      if (params && params.page){
        $this.page = params.page
        if (params.page===1){
          $this.dataList=[]
        }
      }
      if (params && params.pageSize){
        $this.pageSize = params.pageSize
      }

      if (params && params.url) {
        url = params.url
      }
      $this.searchForm.page = $this.page
      $this.searchForm.pageSize = $this.pageSize


      $this.MyRequest($this.ApiDoNameShop + url, $this.searchForm, function (data) {

        var tmpList = []

        data.list.forEach(function (value, index) {
          tmpList.push(value)
        })
        if ($this.page > 1) {
          $this.dataList = $this.dataList.concat(tmpList)
          // console.log('$this.dataList', $this.dataList)
        } else {
          $this.dataList = tmpList
        }
        $this.$forceUpdate()
        setTimeout(function () {
          $this.currIScroll.refresh()
        }, 500)
        // console.log('data',data)
      })
    },
    // 刷新页面
    reflushList: function () {
      this.page = 0
      this.getList()
    },
    // 加载更多
    loadMore: function () {
      this.page = Math.ceil(this.dataList.length / this.pageSize) + 1
      this.getList()
    }
  }
}
</script>
